<template>
    <div>      
        <h1>薪资：{{ salary }}</h1>

        <h2>工龄：{{ info.workAge }}
            <button @click="info.workAge++">点击增加工龄</button>
        </h2>
        <h3>等级：{{ info.title.lev }}
            <button @click="updeteLev">点击提升等级</button>
        </h3>
    </div>
</template>

<script setup>


import { reactive,watch,ref } from 'vue';
const salary=ref(10)
const info= reactive(
    {
        workAge:0,
        title:{
            name:'教授',
            lev:1
        }
    }
)

// 更新info数据
function updeteLev(){
    info.title.lev++
}
// 默认深度侦听
// watch(info,(newVal,oldVal)=>{
//     console.log(newVal,oldVal);
//     salary.value=10+newVal.workAge*0.1+(newVal.title.lev-1)*0.5
// },{deep:false})


// 
// watch(()=>info.workAge,(newVal,oldVal)=>{
//     salary.value += 0.1
// })
// watch(()=>info.title,(newVal,oldVal)=>{
//     salary.value += 0.5
// },{deep:true})   

watch([()=>info.workAge,()=>info.title],(newVal,oldVal)=>{
    console.log(newVal);
    
    salary.value=10+newVal[0]*0.1+(newVal[1].lev-1)*0.5
},{deep:true,immediate:true})



</script>
